<template>
    <!--增删改查-->
  <div>
    <div   class="storemessage">
      <span >
   <el-upload
  class="avatar-uploader"
  :action="uploadURL"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"  @error="errorHandler">
    <img :src="imgUrl" style="height:50px;width:50px; margin:0;" >
</el-upload>
  {{shopName}}{{type}}
     </span>
    </div>

    <el-card class="box-card">
        <el-button type="success" size="small" @click="add" style="float:left">添加图书</el-button>
      <el-table :data="tableData" stripe>
        <!-- <el-table-column prop="id" label="书本id" align="center">
        </el-table-column> -->
        <el-table-column prop="bookName" fixed label="书名" align="center">
        </el-table-column>
       <el-table-column prop="coverImg" label="书本图片"  width="120" align="center">
         <template slot-scope="scope">
        <img  :src="scope.row.coverImg" style="height:50px;width:50px; margin:0;">
     </template>
      </el-table-column>
        <el-table-column prop="author" label="作者" align="center">
        </el-table-column>
          <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
           <el-table-column prop="isbn" label="书号" align="center">
        </el-table-column>
        <el-table-column prop="press" label="出版社" align="center">
        </el-table-column>
        <el-table-column prop="impression" label="印次" align="center">
        </el-table-column>
        <el-table-column prop="publishTime" label="出版时间" align="center">
        </el-table-column>
         <el-table-column prop="synopsis" label="图书简介" align="center">
        </el-table-column>
         <el-table-column prop="price" label="标价" align="center">
        </el-table-column>
         <el-table-column prop="salesVolume" label="销量" align="center">
        </el-table-column>
         <el-table-column prop="stock" label="库存" align="center">
        </el-table-column>
        <el-table-column prop="catagName" label="分类" align="center">
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="remove(scope.$index, scope.row)" style="margin-left:0px">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--弹窗-->
    <el-dialog :title="dialogTitle" width="50%" :visible.sync="iconFormVisible">
      <el-form :model="userInfo" class="demo-form-inline" :label-position="right" ref='userInfo'>
        <el-form-item label="书本图片">
        <el-upload
          class="avatar-uploader"
          :action="uploadURL"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          >
        <img  :src="userInfo.coverImg" style="height:50px;width:50px; margin:0;" >
        </el-upload>
      </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="userInfo.bookName" placeholder="书名"></el-input>
        </el-form-item>
         <el-form-item label="作者">
          <el-input v-model="userInfo.author" placeholder="作者"></el-input>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="userInfo.title" placeholder="标题"></el-input>
        </el-form-item>
         <el-form-item label="书号">
          <el-input v-model="userInfo.isbn" placeholder="书号"></el-input>
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="userInfo.press" placeholder="出版社"></el-input>
        </el-form-item>
        <el-form-item label="印次">
          <el-input v-model="userInfo.impression" placeholder="印次"></el-input>
        </el-form-item>
      <el-form-item label="出版时间">
          <el-input v-model="userInfo.publishTime" placeholder="出版时间"></el-input>
        </el-form-item>
          <el-form-item label="图书简介">
          <el-input v-model="userInfo.synopsis" placeholder="图书简介"></el-input>
        </el-form-item>
        <el-form-item label="标价">
          <el-input v-model="userInfo.price" placeholder="价格" step="0.01" oninput="value=value.replace(/[^\d.]/g,'')" ></el-input>
        </el-form-item>
         <el-form-item label="库存">
          <el-input v-model="userInfo.stock" placeholder="库存" ></el-input>
        </el-form-item>
        <el-form-item label="分类" >
            <el-cascader :options="options" :props="cateProps" clearable @change="ThandleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="iconFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
// import dayjs from 'dayjs'
import { getCateByType } from '@/api/category'
import { getShopBooks, addBook, delBook, updateShopbook } from '@/api/book'
import { editShop, shopByUser } from '@/api/shop'
export default {
  name: 'test',
  data () {
    return {
      iconFormVisible: false,
      newImg: '',
      cateProps: {
        value: 'id',
        label: 'catagName'
      },
      userInfo: {
        id: '',
        coverImg: '',
        bookName: '',
        author: '',
        title: '',
        isbn: '',
        press: '',
        impression: 0,
        publishTime: '',
        synopsis: '',
        price: 0.0,
        stock: 0,
        classification: 0
      },
      // 店铺经营类型
      dialogTitle: '新增',
      rowIndex: null,
      flag: false,
      options: [], // 分类的
      uploadURL: 'http://localhost:4096/files',
      imgUrl: 'https://img14.360buyimg.com/n1/jfs/t1/198153/33/9239/246891/61488100E931689d5/ac6ca4bd01aff683.jpg',
      tableData: []
    }
  },
  created () {
    this.getByType()
    this.getProduct()
    this.getShopMsg()
  },
  mounted () {
    this.getByType()
    this.getProduct()
    this.getShopMsg()
  },
  methods: {
    getShopMsg () {
      const id = JSON.parse(localStorage.getItem('userMsg')).shopId
      shopByUser(id).then(res => {
        console.log(res.data)
        this.shopName = res.data.data.shopName
        this.imgUrl = 'http://localhost:4096/img/' + res.data.data.logImg
        if (res.data.data.type === 1) {
          this.type = '旗舰店'
        } else if (res.data.data.type === 2) {
          this.type = '专营店'
        } else {
          this.type = '卖场店'
        }
      })
    },
    getByType () {
      getCateByType(3).then(res => {
        this.options = res.data.data
        console.log(res.data.data)
      })
    },
    getProduct () {
      const shopid = JSON.parse(localStorage.getItem('userMsg')).shopId
      getShopBooks(shopid).then(res => {
        this.tableData = res.data.data
        console.log(this.tableData)
        this.tableData.forEach((item, index) => {
          item.coverImg = 'http://localhost:4096/img/' + item.coverImg
        })
      })
    },
    // 上传店铺头像操作
    handleAvatarSuccess (res, file) {
      console.log(res)
      this.imgUrl = 'http://localhost:4096/img/' + res.data
      this.imgName = 'http://localhost:4096/img/' + res.data
      this.flag = true
      console.log(this.imgName)
      const shopid = JSON.parse(localStorage.getItem('userMsg')).shopId
      // 将上传的图片上传到数据库当中
      const data = {
        id: shopid,
        logImg: res.data
      }
      editShop(data).then(re => {
        if (re.data.meta.status === 200) {
          this.$message({
            message: '上传头像成功',
            type: 'success'
          })
          this.getShopMsg()
        } else {
          this.$message({
            message: '失败',
            type: 'warning'
          })
        }
      })
    },
    // 上传图书图片操作
    handleSuccess (res, file) {
      this.userInfo.coverImg = 'http://localhost:4096/img/' + res.data
      this.newImg = res.data
      console.log(this.userInfo.coverImg)
    },
    // panduan () {
    //   if (this.imgUrl !== '') {
    //     this.flag = true
    //   }
    // },
    // 增加
    add () {
      this.dialogTitle = '新增'
      this.userInfo = {}
      this.iconFormVisible = true
    },
    // 编辑
    handleEdit (index, row) {
      this.dialogTitle = '编辑'
      this.userInfo = row
      this.iconFormVisible = true
      this.rowIndex = index
    },
    // 弹窗确定
    submitUser () {
      const shopid = JSON.parse(localStorage.getItem('userMsg')).shopId
      // console.log(obj)
      if (this.dialogTitle === '编辑') {
        const da = {
          id: this.userInfo.id,
          bookName: this.userInfo.bookName,
          coverImg: this.userInfo.coverImg.substring(this.userInfo.coverImg.lastIndexOf('/')),
          author: this.userInfo.author,
          title: this.userInfo.title,
          isbn: this.userInfo.isbn,
          press: this.userInfo.press,
          impression: this.userInfo.impression,
          publishTime: this.userInfo.publishTime,
          synopsis: this.userInfo.synopsis,
          shop: shopid,
          price: this.userInfo.price,
          stock: this.userInfo.stock,
          classification: this.userInfo.classification[0]
        }
        console.log(this.userInfo.coverImg.substring(this.userInfo.coverImg.lastIndexOf('/')))
        updateShopbook(da).then(res => {
          if (res.data.meta.status === 200) {
            this.$message({
              message: res.data.meta.msg,
              type: 'success'
            })
            this.getProduct()
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: 'warning'
            })
          }
        })
        this.tableData.splice(this.rowIndex, 1, this.userInfo)
        this.iconFormVisible = false
        return
      } if (this.dialogTitle === '新增') {
        const data = {
          bookName: this.userInfo.bookName,
          coverImg: this.newImg,
          author: this.userInfo.author,
          title: this.userInfo.title,
          isbn: this.userInfo.isbn,
          press: this.userInfo.press,
          impression: this.userInfo.impression,
          publishTime: this.userInfo.publishTime,
          synopsis: this.userInfo.synopsis,
          shop: shopid,
          price: this.userInfo.price,
          stock: this.userInfo.stock,
          classification: this.userInfo.classification[0]
        }
        addBook(data).then(res => {
          console.log(res.data)
          if (res.data.meta.status === 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.iconFormVisible = false
            this.getProduct()
          } else {
            this.$message({
              message: '添加失败',
              type: 'warning'
            })
          }
        })
        this.tableData.splice(0, 0, this.userInfo)
        this.iconFormVisible = false
      }
      this.getProduct()
      // addBook(obj).then(res => {
      //   console.log(res)
      // })
    },

    // 获取选中分类id
    ThandleChange (value) {
      this.userInfo.classification = value
    },
    // 删除
    remove (index, row) {
      this.$confirm(`确定删除${row.bookName}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delBook(row.id).then(res => {
          if (res.data.meta.status === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '添加失败',
              type: 'warning'
            })
          }
          this.tableData.splice(index, 1)
        })
      })
      this.getProduct()
    }
  }
}

</script>
<style scoped>
.img {
  width: 100%;
}
.storemessage{
  font-size: 25px;
}

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

</style>
